import React,{useState,useEffect} from 'react'
import { PageHeader, Descriptions } from 'antd';
import moment from 'moment';
import axios from 'axios';
import style from './News.module.css'
export default function NewsPreview(props) {
    const [newsInfo, setnewsInfo] = useState(null)
    const auditStateList = ['未审核','审核中','已通过','未通过']
    const publishStateList = ['未发布','待发布','已上线','已下线']
    const colorList = ['grey','orange','green','red']
    useEffect(() => {
      axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res=>{
          setnewsInfo(res.data)
      })
      return () => {
        
      }
    }, [props.match.params.id])
    
  return (
    <div>
      {
        newsInfo && <div>
          <PageHeader
            onBack={() => window.history.back()}
            title={newsInfo.title}
            subTitle={newsInfo.category.title}
            >
            <Descriptions size="small" column={3}>
                <Descriptions.Item label="创建者">{newsInfo.author}</Descriptions.Item>
                <Descriptions.Item label="创建时间">{moment(newsInfo.createTime).format('YYYY/MM/DD HH:mm:ss')}</Descriptions.Item>
                <Descriptions.Item label="发布时间">{newsInfo.publishTime?moment(newsInfo.publishTime).format('YYYY/MM/DD HH:mm:ss'):'-'}</Descriptions.Item>
                <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>
                <Descriptions.Item label="审核状态">
                  <span style={{color:colorList[newsInfo.auditState]}}>{auditStateList[newsInfo.auditState]}</span>
                </Descriptions.Item>
                <Descriptions.Item label="发布状态">
                  <span style={{color:colorList[newsInfo.publishState]}}>
                    {newsInfo.publishState?publishStateList[newsInfo.publishState]:'-'}
                  </span>
                  </Descriptions.Item>
                <Descriptions.Item label="访问数量">
                  <span className={style.view}>{newsInfo.view}</span>
                </Descriptions.Item>
                <Descriptions.Item label="点赞数量">
                  <span className={style.star}>{newsInfo.star}</span>
                </Descriptions.Item>
                <Descriptions.Item label="评论数量">
                  <span className={style.comment}>0</span>
                </Descriptions.Item>
            </Descriptions>
          </PageHeader>
          <div dangerouslySetInnerHTML={{__html:newsInfo.content}} className={style.dangerContent}>

          </div>
        </div>
      }
    </div>
  )
}
